<template>
  <MdEditor
    v-model="text"
    style="height: 400px"
    v-bind="$attrs"
    v-if="!$props.isPreview"
  ></MdEditor>
  <MdPreview :modelValue="text" v-if="$props.isPreview" v-bind="$attrs" />
</template>

<script lang="ts" setup>
import { ModelRef } from 'vue'
import { MdEditor, MdPreview } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'

const text = defineModel() as ModelRef<string>

const $props = withDefaults(
  defineProps<{
    isPreview?: boolean
  }>(),
  {
    isPreview: false,
  },
)
</script>


